<template>
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-row>
        <el-col :span="16" class="margin-top">
          <Search :data="selections" :data-value="timeVlaue" :attribute="'plannedDate'" @change="handleTypeChange" @dateChange="handleDateChange" />
        </el-col>
      </el-row>
    </div>
    <div class="box-show marginTop" :style="'height:'+ (innerHeight + 80) + 'px'">
      <el-table v-loading="loading" :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="咨询人员" prop="dataName" :show-overflow-tooltip="true" />
        <el-table-column label="网电咨询次数" prop="advisoryNum" :show-overflow-tooltip="true" />
        <el-table-column label="预约次数" prop="appointmentNum" :show-overflow-tooltip="true" />
        <el-table-column label="到院次数" prop="toHospitalNum" :show-overflow-tooltip="true" />
        <el-table-column label="预约率" prop="appointmentFrequency" :show-overflow-tooltip="true" />
        <!-- <template slot-scope="scope">
            <span>{{ scope.row.deptTotalPrice }}%</span>
          </template>
        </el-table-column> -->
        <el-table-column label="到院率" prop="arriveFrequency" :show-overflow-tooltip="true" />
        <!-- <template slot-scope="scope">
            <span>{{ scope.row.conversion }}%</span>
          </template>
        </el-table-column> -->
      </el-table>
      <!-- <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" /> -->
    </div>
  </div>
</template>
<script>
import Search from "@/components/Search";
import { reports } from "@/config";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      // params: {
      //   page: 1,
      //   pageSize: this.$store.state.commonsettings.maxPageSize,
      // },
      // total: 0,
      selections: reports,
      timeVlaue: "",
      query: {},
      list: [],
      loading: false,
    };
  },
  mounted() {
    this.timeVlaue = "yesterday";
    this.initQuery();
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await this.$api['statement/hospital/internetAdvisoryData']({
        hospitalId: this.$store.getters.currentUserInfo.deptUsrList[0].hospitalId,
        date: this.query.plannedDate,
      });
      this.loading = false;
      if (res.code !== 200) return this.$message.error(res.msg);
      const totalObj = {};
      let a = 0; let b = 0; let c = 0;
      res.data.filter(item => {
        a += Number(item.advisoryNum);
        b += Number(item.appointmentNum);
        c += Number(item.toHospitalNum);
      });
      if (res.data.length > 0) {
        this.$set(totalObj, 'dataName', '合计');
        this.$set(totalObj, 'advisoryNum', a);
        this.$set(totalObj, 'appointmentNum', b);
        this.$set(totalObj, 'toHospitalNum', c);
        console.log(a, b, c, 'sos');
        // console.log((b / a), 's'); // 0/0 = NaN
        if (b !== 0 && a !== 0) {
          this.$set(totalObj, 'appointmentFrequency', ((b / a) * 100).toFixed(2) + '%');
        } else {
          this.$set(totalObj, 'appointmentFrequency', 0 + '%');
        }
        if (c !== 0 && b !== 0) {
          this.$set(totalObj, 'arriveFrequency', ((c / b) * 100).toFixed(2) + '%');
        } else {
          this.$set(totalObj, 'arriveFrequency', 0 + '%');
        }
        res.data.push(totalObj);
      }
      this.list = res.data;
    },
    // handlePaginationChange(val) {
    //   this.params = { page: val.pageNum, pageSize: val.pageSize };
    //   this.getList();
    // },
    handleTypeChange(item) {
      Object.assign(this.query, item);
      this.getList();
    },
    handleDateChange(item) {
      Object.assign(this.query, item);
      this.getList();
    },
    dateHandle(date) {
      const dates = new Date(date);
      const year = dates.getFullYear();
      const month = dates.getMonth() + 1;
      const day = dates.getDate();
      return year + "-" + month + "-" + day;
    },
    initQuery() {
      const curDate = new Date();
      this.query.plannedDate = this.dateHandle(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)) + "_" + this.dateHandle(new Date(curDate.getTime() - 24 * 60 * 60 * 1000));
    },
  },
};
</script>
<style scoped lang="scss">
  .margin-top{
    margin-top: 10px;
  }
</style>
